<template>
	<view class="content">
		<showNewData ref='chrild7'></showNewData>
		<view class="top_bar" style="background-color: white; border-bottom:1rpx solid #b5b5b5;" >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<text>好友申请</text>
			</view>
			<view class="top_bar_right">
				<!-- <image src="../../static/three.png" mode=""></image> -->
			</view>
		</view>
		<view class="main">
			<view class="requester" v-for='item,index in users' :key='index'>
				<view class="requester-top">
					<view class="reject" @click='opcations(item.id,0)' >拒绝</view>
					<view class="img">
						<image :src="item.userimg" mode=""></image>
					</view>
					<button class="aggree" @tap='opcations(item.id,1)'>同意</button>
				</view>
				<view class="conter">
					<view class="title">{{ item.username }}</view>
					<view class="date">{{ item.time }}</view>
				</view>
				<view class="notic">
					<text style="color:#f4ea2a ;">留言:</text>
					{{ item.new_data }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import request from '../../utails/request.js'
	import data1  from '../../commons/js/dateformat.js'
	
	
	export default {
		data() {
			return {
				userinfo:{},
				users:[]
			}
		},
		components:{
			showNewData
		},
		onLoad() {
			this.agetData()
			this.getSocketData()
		},
		methods: {
			// 接socket提醒
			getSocketData(){
				this.socket.emit('login',this.userinfo.id)
				this.socket.on('shows',(data)=>{
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs.chrild7
					ch.handleShow(datas)
				})
			},
			
			 async agetData(){
				 // 校验用户信息
				 // 获取本地信息
				this.userinfo = uni.getStorageSync('userinfo')
				
				const res = await request.request({url:'/requestfriend/',data:{userid:this.userinfo.id}})
				// 数据处理
				this.users = res
				this.users.forEach(v=>{
					v.time = data1.format3(v.time)
				})
			},
			
			// 同意 or 拒绝
			async opcations(id, types){
				let data = {
					userid:this.userinfo.id,
					friendid:id
				}
				let res = {}
				if(types==1){
					res = await request.request({url:'/requestfriend/',data,method:'PUT'})
				}else{
					res = await request.request({url:'/requestfriend/',data,method:'DELETE'})
				}
				if(res.code=='200'){
					uni.showToast({
						title:'操作成功'
					})
					this.sedShow('我已同意你的好友请求', id)
					// 删除数据
					this.users.forEach((v,i)=>{
						if(v.id==id){
							this.users.splice(v,1)
						}
					})
				}else{
					uni.showToast({
						title:'操作失败',
						icon:'none'
					})
					this.sedShow('拒绝你的好友请求', id)
				}
			},
			// 好友申请通知
			sedShow(message,fid){
				let data = {
					userimg:this.userinfo.userimg,
					message:message,
					username:this.userinfo.username // 提供给首页
					}
				this.socket.emit('show',data,fid)
			},
			
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	.main{
		z-index: 0;
		padding-top: 88rpx;
	}
	.main .requester{
		padding: 20rpx 0 20rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0 24rpx 64rpx -8rpx rgba(0,0,0,0.1);
		border-radius: 40rpx;
		margin-top: 80rpx;
	}
	
	.main .requester .requester-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
	}
	
	.main .requester .requester-top .reject{
		flex: none;
		height: 64rpx;
		width: 160rpx;
		text-align: center;
		line-height: 64rpx;
		background-color: #dfdfd9;
		border-radius: 24rpx;
		margin-top: 100rpx;
		margin-left: 20rpx;
	}
	.main .requester .requester-top .img{
		flex: auto;
		width: calc( 100% - 360rpx );
		text-align: center;
		
	}
	
	.main .requester .requester-top .img image{
		
		border-radius: 50%;
		width: 160rpx;
		height: 160rpx;
	}
	.main .requester .requester-top .aggree{
		flex: none;
		height: 64rpx;
		width: 160rpx;
		text-align: center;
		line-height: 64rpx;
		background-color: #f4ea2a;
		color: white;
		border-radius: 24rpx;
		margin-top: 100rpx;
		margin-right: 20rpx;
		z-index: 200;
		
	}
	
	.conter{
		text-align: center;
		padding-top: 20rpx;
	}
	.conter .title{
		font-size: 36rpx;
	}
	.conter .date{
		font-size: 16rpx;
		color: #ADADAD;
	}
	
	.notic{
		margin: 20rpx;
		height: 100rpx;
		padding: 20rpx 32rpx;
		line-height: 48rpx;
		background-color: #efefef;
		border-radius: 32rpx;
	}
	
</style>
